<template>
  <div class="capital">
    <my-head title="资金详情" :go="true" :ri="false"></my-head>
    <div class="content">
      <div class="shang">
        <div class="item">
          <div class="item-msg item-t">
            <span>资产总额</span>
            <span>0.00</span>
          </div>
          <div class="item-msg item-b">
            <div class="item-msg">
              <span>投资</span>
              <span>0.00</span>
            </div>
            <div class="item-msg">
              <span>积分</span>
              <span>0</span>
            </div>
          </div>
        </div>
      </div>
      <div class="yuan">
        <div class="msg">
          <div class="cen">
            <div class="cen-han">
              <div class="cen-item">
                <span></span>
                <div>
                  <p>待收本金</p>
                  <p>0.00</p>
                </div>
              </div>
              <div class="cen-item">
                <span></span>
                <div>
                  <p>待收利息</p>
                  <p>0.00</p>
                </div>
              </div>
              <div class="cen-item">
                <span></span>
                <div>
                  <p>可用余额</p>
                  <p>0.00</p>
                </div>
              </div>
            </div>
            <div class="cen-han">
              <div class="cen-item">
                <span></span>
                <div>
                  <p>冻结资金</p>
                  <p>0.00</p>
                </div>
              </div>
              <div class="cen-item">
                <span></span>
                <div>
                  <p>提现待审核</p>
                  <p>0</p>
                </div>
              </div>
              <div class="cen-item">
                <span></span>
                <div>
                  <p>投资待满标</p>
                  <p>0</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xia">
        <div class="item">
          <div class="item-msg item-t">
            <span>投资收益</span>
            <span class="orange">0.0</span>
          </div>
          <div class="item-msg item-b">
            <div class="item-msg">
              <span>以收益</span>
              <span>0.00</span>
            </div>
            <div class="item-msg">
              <span>待收益</span>
              <span>0.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/Head"
export default {
  components:{
    myHead:Head
  }
}
</script>

<style scoped lang="less">
  .capital{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content{
      flex: 1;
      .orange{
        color: orange;
      }
      .item{
        display: flex;
        flex-direction: column;
        padding: 0.115rem 0;
        .item-msg{
          flex: 1;
          text-align: center;
          display: flex;
          flex-direction: column;
        }
        .item-t{
          font-size: 0.17rem;
          span{
            padding: 0.115rem 0;
          }
        }
        .item-b{
          display: flex;
          flex-direction: row;
          font-size: 0.14rem;
          span{
            padding: 0.075rem 0;
          }
        }
      }
      .shang{
        background: #ffa05c;
        color: #fff;
      }
      .yuan{
        background: #ffa05c;
        height:0.7rem;
        border-radius: 0 0 50% 50%;
        margin-top: -0.01rem;
        position: relative;
        margin-bottom:0.3rem; 
        .msg{
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          .cen{
            flex: 1;
            margin: 0 0.2rem;
            background: #fff;
            padding: 0.1rem 0.27rem;
            box-shadow:0.01rem 0.01rem 0.02rem #d2d2d2;
            display: flex;
            flex-direction: column;
            .cen-han{
              flex: 1;
              display: flex;
              flex-direction: row;
              .cen-item{
                flex: 1;
                font-size: 0.13rem;
                display: flex;
                flex-direction: row;
                span{
                  display: block;
                  width: 0.1rem;
                  height: 0.1rem;
                  border-radius: 50%;
                  background: orange;
                }
                div{
                  p{
                    padding: 0.06rem 0.025rem;
                  }
                  p:first-child{
                    color: #898989;
                    padding-top: 0;
                  }
                }
              }
            }
          }
          
        }
      }
      .xia{
        .item-b{
          color: #858585;
        }
      }
    }
  }
</style>
